<template>
  <div class="bg-white px-5">
    <div class="text-3xl font-bold py-3">乐馆</div>
    <el-tabs v-model="activeName" class="py-1">
      <el-tab-pane label="精选" name="selected">
        <div class="w-full h-52 flex justify-between gap-5">
          <div class="bg-green-100 flex-auto h-full relative" v-for="item in highQualityList">
            <img :src="item.coverImgUrl" class="w-full h-full object-cover rounded-md">
            <div class="absolute bottom-1 text-white text-sm bg-black/35 px-2 py-0.5 left-0 w-full line-clamp-1 text-ellipsis">{{ item.name }}</div>
          </div>
        </div>
        <!-- 新歌速递 -->
        <div>
          <div class="text-sm text-gray-500 py-1 mt-10 relative flex items-end">
            新歌速递
            <div class="absolute right-5 flex items-center gap-1">
              更多
              <svg t="1728549652547" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="6419" id="mx_n_1728549652548" width="10" height="10">
                <path
                  d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z"
                  p-id="6420"></path>
              </svg>
            </div>
          </div>
          <div class="h-fit w-full py-3 flex flex-wrap gap-5">
            <div class="flex" style="flex:1 1 45%" v-for="item, index in newSongs">
              <div class="w-full flex gap-3">
                <img :src="item.album.picUrl" alt="" class="w-20 h-20 rounded-md">
                <div class="flex flex-col gap-3">
                  <div>{{ item.name }}</div>
                  <div class="text-sm text-gray-500">
                    <span v-for="i in item.artists">
                      {{ i.name }}
                      <em v-if="i != item.artists[item.artists.length - 1]"> | </em>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 热门电台 -->
        <div class="mt-5">
          <div class="py-1 mt-3 flex items-end">
            <div class="text-xl font-bold text-black">热门电台</div>
            <div class="absolute right-5 flex items-center gap-1 text-sm text-gray-500">
              更多
              <svg t="1728549652547" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="6419" id="mx_n_1728549652548" width="10" height="10">
                <path
                  d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z"
                  p-id="6420"></path>
              </svg>
            </div>
          </div>
          <banner title="djLIst" :song-list="hotDjLIst" />
        </div>

        <!-- 最新发行 -->
        <div class="mt-5">
          <div class="flex items-end py-1 mt-3">
            <div class="text-xl font-bold text-black">最新发行</div>
            <ul class="flex mx-5 gap-2 text-gray-500 text-sm">
              <li v-for="item in newAblumTabList" :class="{ 'text-green-500': activeNew === item.value }"
                @click="changeArea(item)">{{ item.name }}</li>
            </ul>
            <div class="absolute right-5 flex items-center gap-1 text-sm text-gray-500">
              更多
              <svg t="1728549652547" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="6419" id="mx_n_1728549652548" width="10" height="10">
                <path
                  d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z"
                  p-id="6420"></path>
              </svg>
            </div>
          </div>
          <banner title="最新发行" :song-list="newAlbum" />
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="听书" name="listening"></el-tab-pane>
      <el-tab-pane label="排行" name="ranking"></el-tab-pane>
      <el-tab-pane label="歌手" name="singer"></el-tab-pane>
      <el-tab-pane label="分类歌单" name="cpList"></el-tab-pane>
      <el-tab-pane label="数字专辑" name="dAlbum"></el-tab-pane>
      <el-tab-pane label="音质专区" name="sqZone"></el-tab-pane> -->
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useStore } from '@renderer/store'
import { storeToRefs } from "pinia"
import Banner from '@renderer/components/banner/banner.vue'

const { musicHallStore } = useStore()
const { highQualityList, newSongs, hotDjLIst, newAlbum } = storeToRefs(musicHallStore)
const activeName = ref('selected')
const activeNew = ref('ALL')
const newAblumTabList = ref([
  { name: '最新', value: 'ALL' },
  { name: '华语', value: 'ZH' },
  { name: '欧美', value: 'EA' },
  { name: '韩国', value: 'KR' },
  { name: '日本', value: 'JP' },
])


onMounted(() => {
  getHighQualityList()
  getNewSongs()
  getHotDjList()
  getNewAblum()
})
const changeArea = (item: { name: string, value: string }) => {
  activeNew.value = item.value
  getNewAblum()
}
const getHighQualityList = async () => {
  await musicHallStore.getHighQualityList()
}
const getNewSongs = async () => {
  await musicHallStore.getNewSong()
}
const getHotDjList = async () => {
  await musicHallStore.getHotDj()
}
const getNewAblum = async () => {
  await musicHallStore.getNewAlbum(activeNew.value)
}
</script>


<style scoped>
:deep(.el-tabs__header) {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
}
</style>
